<template>
  <div class="app-container">
    <div class="result-wrapper">
      <div class="color-box">
        <div class="box-col">
          <img src="../assets/image/chuyu.png" alt class="image" />
        </div>
        <div class="box-col">
          <img src="../assets/image/kehuishou.png" alt class="image" />
        </div>
        <div class="box-col">
          <img src="../assets/image/youhai.png" alt class="image" />
        </div>
        <div class="box-col">
          <img src="../assets/image/qita.png" alt class="image" />
        </div>
      </div>
      <div class="search-result">
       <div class="nav-content">
          <input class="search-input" v-model="kw" placeholder="请输入垃圾名称"/>
          <button class="search-btn" @click="search">搜索</button>
        </div>
        <div class="result-item" v-for="item in garbageList" :key="item.id">
          <div>
            <span style="font-weight:bold">{{kw}}</span>
            <span> 属于 </span>
            <span style="font-weight:bold">{{item.category.category_name}}</span>
          </div>
        </div>
      </div>
      <div class="bottom-info">
        <div class="info-box">
          <img class="info-img" src="../assets/image/reback.png" alt />
          <dl>
            <dt style="font-weight:bold;margin:10px 0;">可回收垃圾：</dt>
            <dd>1.适宜回收利用和资源化 利用的，如：玻、金、 塑、纸、衣</dd>
            <dd>2.酱油瓶、玻璃杯、平板玻璃、易拉罐、饮料瓶、洗发水瓶、塑料玩具、书本、报纸、广告单、纸板箱、衣服、</dd>
            <dt style="font-weight:bold;margin:10px 0;">投递指南</dt>
            <dd>
              <li>轻投轻放</li>
              <li>清洁干燥，避免污染</li>
              <li>废纸尽量平整</li>
              <li>立体包装物请清空内容物，清洁后压扁投放</li>
              <li>有尖锐边角的，应包裹后投放</li>
            </dd>
          </dl>
        </div>
        <div class="info-box">
          <img class="info-img" src="../assets/image/ganlaji.png" alt />
          <dl>
            <dt style="font-weight:bold;margin:10px 0;">干垃圾是指：</dt>
            <dd>1.除有害垃圾、可回收 物、湿垃圾以外的其他 生活废弃物</dd>
            <dd>2.餐盒、餐巾纸、湿纸巾、卫生间用纸、塑料袋、 食品包装袋、污染严重的纸、烟蒂、纸尿裤、 一次性杯子、大骨头、贝壳、花盆、陶瓷等</dd>
            <dt style="font-weight:bold;margin:10px 0;">投递指南</dt>
            <dd>
              <li>尽量沥干水分</li>
              <li>难以辨识类别的生活垃圾投入干垃圾容器内</li>
            </dd>
          </dl>
        </div>
        <div class="info-box">
          <img class="info-img" src="../assets/image/shilaji.png" alt />
          <dl>
            <dt style="font-weight:bold;margin:10px 0;">湿垃圾是指：</dt>
            <dd>1.剩菜剩饭、瓜皮果核、花卉绿植、过期食品等</dd>
            <dt style="font-weight:bold;margin:10px 0;">投递指南</dt>
            <dd>
              <li>纯流质的食物垃圾，如牛奶等，应直接倒进下水口</li>
              <li>有包装物的湿垃圾应将包装物去除</li>
              <li>后分类投放，包装物请投放到对应的可回收物或干垃圾容器</li>
            </dd>
          </dl>
        </div>
        <div class="info-box">
          <img class="info-img" src="../assets/image/danger.png" alt />
          <dl>
            <dt style="font-weight:bold;margin:10px 0;">有害垃圾是指：</dt>
            <dd>1.对人体健康或者自然环 境造成直接或潜在危害的废弃物</dd>
            <dd>2.废电池、油漆桶、荧光灯管、废药品及其包装物等</dd>
            <dt style="font-weight:bold;margin:10px 0;">投递指南</dt>
            <dd>
              <li>投放时请注意轻放</li>
              <li>易破损的请连带包装或包裹后轻放</li>
              <li>如易挥发，请密封后投放</li>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      garbageList: [],
      kw: ""
    };
  },

  mounted() {},
  methods: {
    async search() {
      const res = await this.$http.get(
        `/users/searchGarbage?garbage_info=${this.kw}`
      );
      this.garbageList = res.data;
    }
  }
};
</script>

<style lang="less" socped>
@import "../assets/style/search.less";
</style>